import 'package:flutter/material.dart';
import 'package:imitating_tiktok/pages/base_pages/values/bar_value.dart';

class BaseNavigationBar extends StatelessWidget {
  const BaseNavigationBar(
      {Key? key, required this.selectedIndex, required this.doSelectedAction})
      : super(key: key);

  final int selectedIndex;
  final Function doSelectedAction;

  @override
  Widget build(BuildContext context) {
    double kScreenWidth = MediaQuery.of(context).size.width;
    double elementWidth = kScreenWidth / 5.0;
    double elementHeight = 49.0;
    return BottomAppBar(
      color: Colors.black,
      child: Container(
        height: elementHeight,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            _layoutBottomElement(selectedIndex == 0, 0, elementWidth, "首页"),
            _layoutBottomElement(selectedIndex == 1, 1, elementWidth, "朋友"),
            _addVideoElement(elementHeight),
            _layoutBottomElement(selectedIndex == 3, 3, elementWidth, "消息"),
            _layoutBottomElement(selectedIndex == 4, 4, elementWidth, "我"),
          ],
        ),
      ),
    );
  }

  /// MARK -: 布局底部按钮
  Widget _layoutBottomElement(
    bool isSelectedBool,
    int index,
    double width,
    String title,
  ) {
    return GestureDetector(
      onTap: () {
        doSelectedAction(index);
      },
      child: Container(
        width: width,
        color: Colors.black,
        padding: EdgeInsets.only(top: 10.0),
        child: Column(
          children: [
            Text(
              title,
              style: isSelectedBool
                  ? barSelectedTextStyle
                  : barNoSelectedTextStyle,
            ),
            SizedBox(
              height: 5,
            ),
            Container(
              alignment: Alignment.center,
              width: 20,
              height: 4,
              decoration: BoxDecoration(
                color: isSelectedBool ? Colors.white : Colors.transparent,
                borderRadius: BorderRadius.all(Radius.circular(2.0)),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _addVideoElement(double height) {
    return Container(
      width: 48.0,
      height: height - 20.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
        gradient: LinearGradient(colors: [Colors.blueAccent, Colors.redAccent]),
      ),
      child: Center(
        child: Container(
          width: 44.0,
          height: height - 20.0,
          // margin: EdgeInsets.only(left: 2.0, right: 2.0),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Icon(
            Icons.add,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}
